import React from "react";
import {inject, observer} from "mobx-react";
import {Route, withRouter} from "react-router-dom";
import {Bubble, Icon, Modal, Popover, SearchBar, Tabs, Tools} from "weaver-mobile";
import {ListViewPage, RouteLayout} from "weaver-mobile-page";
import Condition from "./condition";
import {openHrmCard} from "../../../util";
import {observable, toJS} from "mobx";
import {WrListCard, WrListCardOperate, WrMenu, WrShow} from "../../../public";
import AccessView from "../accessView";

const getLabel = Tools.getLabel;
const tabs = [
    {title: getLabel(6106, "考核")},
    {title: getLabel(359, "审批")},
];

/**
 * 考核评分
 * jiansong 2019/11/8
 */
@inject("accessAuditStore")
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            show: false, //批量操作
            chooseAll: false //是否全选状态
        };
        this.store = this.props.accessAuditStore;
    }

    componentDidMount() {
        this.store.doInit();
    }

    render() {
        const {list, getTableDatas, onSearchChange, queryParams, search} = this.store;
        const {show, chooseAll} = this.state;
        const {history, menu} = this.props;
        let chooseNum = list.selectedRowKeys.length;
        return (
            <div className="workrelate-performance-accessAudit workrelate-listCard-reset">
                <SearchBar
                    value={queryParams.scorename}
                    placeholder={getLabel(500351, "请输入关键字")}
                    showExtraButton
                    extraButton={this.getExtraButton()}
                    onChange={val => onSearchChange({"scorename": val})}
                    onSubmit={getTableDatas}
                />
                <Tabs tabs={tabs}
                      initialPage={queryParams.showtype - 1}
                      onChange={(tab, index) => {
                          if (index == 0) {
                              this.setState({show: false})
                          }
                          onSearchChange({"showtype": (index + 1)})
                          getTableDatas();
                      }}
                      renderTabBar={props => <Tabs.ExpandTabBar {...props} />}
                />
                <WrShow show={show}>
                    <div className="accessAudit-batch-choose">
                        <span onClick={() => {
                            list.selectNone();
                            this.setState({
                                show: false,
                            })
                        }}>{getLabel(31129, "取消")}</span>
                        <span>{getLabel(513668, "已选择{num}条数据").replace("{num}", chooseNum)}</span>
                        <span style={{color: chooseAll && "#55B1F9"}} onClick={() => {
                            if (chooseAll) {
                                list.selectNone();
                            } else {
                                list.selectAll();
                            }
                            this.setState({chooseAll: !chooseAll})
                        }}>{getLabel(556, "全选")}</span>
                    </div>
                </WrShow>
                <ListViewPage.Normal
                    store={list}
                    heightSpace={window.getThemeVars ? window.getThemeVars()["hd"] * 49 : 52}
                    showCheck={this.state.show}
                    getTemplate={this.getTemplate}
                    renderSeparator={this.renderSeparator}
                    onRowClick={data => this.getRowClick(data)}
                />
                <WrShow show={show}>
                    <div className="accessAudit-batch-button">
                    <span onClick={() => this.handleBatch("quick_approve")}>
                        <span><Icon type="approval"/></span>
                        <span className="desc">{getLabel(83212, "批量批准")}</span>
                    </span>
                        <span onClick={() => this.handleBatch("quick_return")}>
                        <span><Icon type="end"/></span>
                        <span className="desc">{getLabel(83423, "批量退回")}</span>
                    </span>
                    </div>
                </WrShow>
                <WrShow show={!show}>
                    <WrMenu
                        data={menu}
                        onSelect={val => history.push(val.props.path)}/>
                </WrShow>
                <Route
                    key="performance-accessAduit-condition"
                    path="/performance/accessAudit/condition"
                    breadcrumbName="考核评分-高级搜索条件"
                    render={() => (
                        <RouteLayout>
                            <Condition key="route-accessAudit"/>
                        </RouteLayout>
                    )}
                />
                <Route key="performance-accessAduit-accessView"
                       breadcrumbName="评分详情"
                       path="/performance/accessAudit/accessView"
                       render={() =>
                           <RouteLayout>
                               <div className="wm-route-layout" key="route-accessAduit-accessView">
                                   <AccessView menu={this.props.menu} updateListData={getTableDatas}/>
                               </div>
                           </RouteLayout>
                       }
                />
            </div>
        )
    }

    //处理批量操作
    handleBatch = (operate) => {
        const {list: {selectedRowKeys}} = this.store;
        if (selectedRowKeys.length > 0) {
            this.auditData({
                scoreids: selectedRowKeys,
                operation: operate
            }, operate == "quick_approve" ? getLabel(513666, "确定批量批准考核结果吗？") : getLabel(513667, "确定批量退回考核结果吗？"))
        } else {
            Bubble.warning(getLabel(501159, "请选择要操作的数据"))
        }
    }

    //行点击事件
    getRowClick = (data) => {
        const {list} = this.store;
        const {show} = this.state;
        if (show) {
            //修改选中框值
            if (list.selectedRowKeys.includes(data.id)) {
                list.selectedRowKeys = list.selectedRowKeys.filter(n => n != data.id)
            } else {
                list.selectedRowKeys.push(data.id + "")
            }
        } else {
            this.props.history.push("/performance/accessAudit/accessView?scoreid=" + data.id);
        }
    }

    //每列数据操作按钮
    renderSeparator = (section, index) => {
        const {list, queryParams} = this.store;
        const data = toJS(list.data)[index];
        const params = [{
            label: getLabel(142, "批准"),
            iconname: "approval",
            onClick: () => this.auditData({
                scoreid: data.id,
                operation: "approve",
            }, getLabel(508666, "确定批准此考核结果"))
        }, {
            label: getLabel('236', '退回'),
            iconname: "end",
            onClick: () => this.auditData({
                scoreid: data.id,
                operation: "return",
            }, getLabel(508667, "确定退回此考核结果"))
        }]
        return <WrListCardOperate
            key={index}
            showOperate={queryParams.showtype != 1 && !this.state.show}
            data={params}/>;
    }

    //审核数据
    auditData = (params, message) => {
        Modal.alert(getLabel(386786, "信息确认"), message, [
            {text: getLabel(31129, "取消")},
            {
                text: getLabel(826, "确定"),
                onPress: () => this.store.accessAuditOperation(params)
            },
        ])
    }

    //获取搜索框额外按钮
    getExtraButton = () => {
        const {search, queryParams} = this.store;
        let button = [{
            key: "filter",
            show: <span onClick={() => this.props.history.push("/performance/accessAudit/condition")}>
                <Icon key="filter-o" type="filter-o"/>
            </span>
        }]
        queryParams.showtype != 1 && button.push({
            key: "operate",
            show: <Popover
                mask
                visible={false}
                onSelect={this.onPopoverSelect}
                overlay={[
                    ((<div className="workrelate-header-item">
                            <Popover.Item><span
                                className="workrelate-header-item-cycle">{getLabel(500410, "批量操作")}</span></Popover.Item>
                        </div>
                    )),
                ]}
            >
                <Icon key="ellipsis" type="ellipsis"/>
            </Popover>
        })
        return button;
    }

    //右上角按钮触发
    onPopoverSelect = (node, index) => {
        this.setState({show: true})
    }

    //获取数据模板
    getTemplate = (template) => {
        return {
            default: [{
                key: "col_1",
                render: data => <WrListCard data={[
                    {label: getLabel(24986, "标题"), value: data.idspan},
                    {label: getLabel(15386, "周期"), value: data.yearspan},
                    {
                        label: getLabel(30042, "人员"),
                        value: <span style={{color: "#4D7AD8"}} onClick={(e) => openHrmCard(data.userid, e)}>
                            {data.useridspan}
                        </span>
                    },
                    {label: getLabel(33553, "分部"), value: data.subcompanyid1span},
                    {label: getLabel(27511, "部门"), value: data.departmentidspan},
                    {label: getLabel(23247, "状态"), value: this.getStatus(data.status, data.statusspan)},
                    {label: getLabel(18249, "当前分值"), value: data.result},
                    {label: getLabel(22326, "截止日期"), value: data.enddate},
                ]}/>
            }]
        }
    }

    //获取方案状态
    getStatus = (val, span) => {
        const color = {
            "0": "#EAA81C",//考核中
            "1": "#868686",//审批中
            "2": "#B916E8",//退回
            "3": "#49D732",//已完成
        }
        return <span className="workrelate-status" style={{background: color[val]}}>{span}</span>
    }

}

